<template>
	<view class="" style="overflow-x: auto;">
		<view id="pdf-container">
			<!-- 第一页 -->
			<image id="pdf-one" class="image-pdf1" src="../../static/index/01.png" mode=""></image>
			<view style="height: 15rpx;"></view>
			<!-- 第二页 -->
			<image class="image-pdf1" src="../../static/index/02.png" mode=""></image>
			<view style="height: 15rpx;"></view>
			<!-- 第三页 -->
			<view class="pages-view1111">
				<view class="flex-alignItems-center">
					<image class="table-header-trlogo" src="../../static/index/03.png" mode=""></image>
					<image class="table-header-trlogo1" src="../../static/index/04.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view style="height: 200rpx;"></view>
		<view class="padding-30 bg-fff position-fixed-bottom">
			<view @click="getManyPdf" class="pdf-downLoad-btn flex-center">下载PDF</view>
		</view>
	</view>
</template>

<script>
	import html2Canvas from "html2canvas";
	import JsPDF from "jspdf";
	export default {
		data() {
			return {

			}
		},
		onShow() {
			
		},
		methods: {
			// 生成多张Pdf
			getManyPdf() {
				let _this = this;
				var dom = document.getElementById("pdf-container"); // 生成pdf的html内容
				var dom1 = document.getElementById("pdf-one"); // 生成pdf的html内容
				console.log(dom)
				console.log(dom1.offsetHeight)
				html2Canvas(dom, {
					allowTaint: true,
					scrollY: 0,
					scrollX: 0,
					useCORS: true, // 开启跨院
					width:900, // pdf宽度
					// width: 1000, // 这个宽度，太扯淡了，固定1000，防止偏移！
					height: dom.offsetHeight
				}).then(function(canvas) {
					// var contentWidth = 750 // 宽高写死，强制分页
					var contentHeight = dom.offsetHeight
					//一页pdf显示html页面生成的canvas高度;
					// var pageHeight = contentWidth / 592.28 * 841.89;
					var pageHeight = dom1.offsetHeight;
					//未生成pdf的html页面高度
					var leftHeight = contentHeight;
					//页面偏移
					var position = 0;
					//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
					var imgWidth = 595.28;
					var imgHeight = 2377; // 为了分页，所以写死。592.28 / contentWidth * contentHeight会导致图片被分割
					var pageData = canvas.toDataURL("image/jpeg", 1.0);
					var pdf = new JsPDF("", "pt", "a4");
					//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
					//当内容未超过pdf一页显示的范围，无需分页
					console.log(leftHeight)
					console.log(pageHeight)
					if (leftHeight < pageHeight) {
					  pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
					} else {
					  while (leftHeight > 0) {
					    //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
					    pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
					    leftHeight -= pageHeight;
					    position -= 841.89;
						console.log(leftHeight)
						console.log(position)
					    //避免添加空白页
					    if (leftHeight > 0) {
					      pdf.addPage();
					    }
					  }
					}
					pdf.save(`多页报告}.pdf`);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages-view1111{
		width: 1750rpx;
		height: 1200rpx;
		background-color: #ffffff;
	}
	.table-header-trlogo1{
		width: 392rpx;
		height: 25rpx;
		flex-shrink: 0;
	}
	.table-header-trlogo{
		width: 98rpx;
		height: 54rpx;
		flex-shrink: 0;
	}
	
	// 底部按钮
	.pdf-downLoad-btn {
		background-color: #5A8AFF;
		color: #ffffff;
		font-size: 30rpx;
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
	}
	
	.image-pdf1 {
		width: 1750rpx;
		height: 1200rpx;
	}
</style>